<template>
<div>
    <div class="flex-top">
          <div>
                <i class="el-icon-arrow-left back" @click="handleBack"></i>
                <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
                      预算调整单 </span>
                <small>
                      <span>状态：</span>
                      <el-tag type="success">新增</el-tag>
                </small>
          </div>
          <!-- 右侧 -->
          <div class="flex">
                <span class="wrapper">
                      <el-button type="info">
                            <i class=""></i> 附件
                      </el-button>
                      <el-button type="info" @click="handleSave">
                            <i class="icon iconfont icon-baocun"></i> 保存
                      </el-button>
                      <el-button type="success" @click="handleSubmit">
                            <i class="el-icon-circle-check"></i> 提交
                      </el-button>
                </span>
          </div>
      </div>
      	<!-- 中部 -->
			<main class="main">
				<div class="main-left">
				  <div>
					<h3>日期：</h3>
					<div class="flex">
						<el-date-picker type="date" placeholder="选择日期" v-model="docDate">
						</el-date-picker>
					</div>
					</div>
				</div>
				<div class="main-right">
					<div class="left-form">
						<el-row>
							<el-col :span="24">
								<span>预算类型：</span>
								<el-select v-model="BudgetType"
                 style="margin-left:20px;"
                 @change="handleClearDetails">
									<el-option v-for="(items,index) in BudgetTypeList" 
                    :key="index" :value="items.Code" :label="items.Name">
									</el-option>
								</el-select>
							</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
								<span>调整方式：</span>
								<el-select v-model="AdjustModel" style="margin-left:20px;">
									<el-option v-for="(items,index) in AdjustModelList" :key="index" :value="items.Code" :label="items.Name">
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</div>
          <div class="right-form">
						<span>业务描述</span><br><br>
            <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            v-model="describe" 
            class="textarea-title">
            </el-input>
					</div>
				</div>
			</main>

			<!--底部 预算明细 -->
		  <div class="budget">
        <div style="padding:10px;">     
          <span><i class="icon iconfont icon-iconfontcolor52"></i> 预算明细</span>&#x3000;
          <el-button class="add-button" type="primary" size="mini" @click="handleAddDetail">添加行</el-button>
        </div>
        <table class="HideTable" border="1">
          <tr>
            <th>金额</th>
            <th>月份</th>
            <th>费用承担部门</th>
            <th>费用类型</th>
            <th>预算余额</th>
            <th>操作</th>
          </tr>
          <tr v-for="(i,index) in details" :key="index">
            <!-- 遍历初始化的detail添加行空数据 -->
            <td>
              <el-input type="number" v-model.number="i.BorrowLine_BorrowMoney" class="formval-money"></el-input>
              <!-- v-model => 金额 -->
            </td>
            <td>
              <el-select class="formVal" v-model="i.month" @change="changemonth(index,i.month)">
                <el-option v-for="(item,index) in months" :value="item.Code" :key="index" :label="item.Name">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select class="formVal" v-model="i.YBL_Department" @change="changeSelect(index,i.YBL_Department)">
                <!-- v-model => 费用承担部门 -->
                <el-option v-for="(item,index) in bears" :value="item.CODE" :key="index" :label="item.FULLNAME">
                  <!-- 部门名称 -->
                </el-option>
              </el-select>
            </td>
            <td>
              <!-- BorrowLine_YBL 费用类型iD??? -->
              <!-- 這個index哪來的 handleChangemonth(index) -->
              <el-select class="formVal" @change="handleChangemonth(index)" v-model="i.BorrowLine_YBL">   
                <!-- v-model => 费用类型 -->
                <el-option v-for="(item,index) in i.costTypes" :value="item.ID" :key="item.ID" :label="item.BudgetItem_Name">
                </el-option>
              </el-select>
            </td>
            <td>
              <span class="budgetBalance">{{i.balance}}</span>
              <!-- 预算金额 -->
            </td>
            <td>
              <el-button size="small" @click="handleDeleteDetail(index)" type="danger" class="dele">删除</el-button>
            </td>
          </tr>
        </table>
      </div>
</div>
</template>
<script>
import axios from "../../../util/axios";

export default {
  data() {
    return {
      docDate: new Date(),
      BudgetTypeList: [], // 预算类型列表
      BudgetType: "", // 当前预算类型
      AdjustModel: "", // 当前调整方式
      AdjustModelList: [], //调整方式列表
      months: [],     // 月份列表
      describe: "", // 业务描述，
      details: [
        {
          BorrowLine_BorrowMoney: "", //金额
          YBL_Department: "", //费用承担部门
          BorrowLine_YBL: "", //费用类型
          balance: "", //预算金额
          month: 0,
          costTypes: []
        }
      ],// 明細列表

      bears:[], // 费用承担部门数据
    };
  },

  mounted() {
    // 初始化
    this.handleInit();
  },
  methods: {
    // 獲取月份數據
    getMonths(){
      return axios.get("getMonth")
    },
    // 获取费用承担部门数据
    getBears(){
      axios.get("getDept").then(res => {
        console.log(res, '獲取到的費用承擔部門數據')
        this.bears = res;
      });
    },

    // 新建显示时候 初始化
    handleInit() {
      this.docDate = new Date();
      //获取月份 Select v-for时候用
      try {
        this.getMonths()
          .then(res => {
            this.months = res;
            console.log(res, '獲取到的月份信息');
            // 這裡獲取明細列表 接口有沒有?
            let details = this.details;
            details.forEach(function(item, index) {
              item.month = res[0].Code;
            });
          })
          .catch(err => {
            console.log(err);
          }),
          //获得调整方式，预算类型 两个Select 数组
        axios
          .get("budgetTypeAndArrangeModel")
          .then(res => {
            this.AdjustModelList = res.AdjustMode; //调整方式
            this.BudgetTypeList = res.BudgetType; //	预算类型
            this.AdjustModel = res.AdjustMode[0].Code;
            console.log(typeof this.AdjustModel);
            this.BudgetType = res.BudgetType[0].Code;
            console.log(typeof this.BudgetType);
          })
          .catch(err => {
            console.log(err);
          });
        this.getBears();

      } catch (error) {
        console.log(error);
      }
    },
    //处理返回
    handleBack() {},
    // 处理保存事件
    handleSave() {},
    // 处理提交事件
    handleSubmit() {},
    // 清除明细列表
    handleClearDetails() {},
    
    // 添加明细事件
    handleAddDetail() {},
    // handleChangemonth
    handleChangemonth(){},
    //刪除明細事件 
    handleDeleteDetail(){}
  }
};
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
  margin: 10px auto 0 0;
}
.HideTable th {
  width: 16.6666%;
}
</style>